/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
} from 'react-native';

//自己mock一些数据
var MOCKED_MOVIEW_DATA=[{title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}];
//获取网络数据
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

class TestAndroid extends Component {
/*  render(){
    var movie=MOCKED_MOVIEW_DATA[0];
    return(
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
          <Image 
          source={{uri:movie.posters.thumbnail}}
          style={styles.thumbnail}
          />
        </View>
      );
  }*/
//*****************************************************************************************************//
/*   getInitialState() {
    return{
      movies:null,
    };
  }*/


//es6 的用法
/*constructor(props) {
  super(props);

  this.state = {movies:null,movie:null};

}

//是 React 组件里面只会调用一次的函数。
  componentDidMount(){
    this.fetchData();
  }

//负责处理数据的获取
  fetchData(){
    fetch(REQUEST_URL)
    .then((response)=>response.json())
    .then((responseData)=>{
      this.setState({  //setState 会触发一个从新渲染
        movies:responseData.movies,
      });
    })
    .catch((error)=>{console.error(error);})
    .done;
  }

  render(){
    if (!this.state.movies) {
      return this.renderLoadingView();
    }
    var movie=this.state.movies[0];
    return this.renderMovie(movie);
  }

  renderLoadingView(){
    return(
      <View style={styles.container}>
      <Text>加载中……</Text>
      </View>
      );
  }

  renderMovie(){
    return(
            <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
          <Image 
          source={{uri:movie.posters.thumbnail}}
          style={styles.thumbnail}
          />
        </View>
      );
  }*/
//*****************************************************************************************************************//

render(){
  if (!this.state.loaded) {
  return(
      <View style={styles.container}>
      <Text>加载中……</Text>
      </View>
      );
  }

  return(<ListView
    dataSource={this.state.dataSource}
    renderRow={this.renderMovie}
    style={styles.listView}
    />
    );
}

renderMovie(){
    return(
            <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
          <Image 
          source={{uri:movie.posters.thumbnail}}
          style={styles.thumbnail}
          />
        </View>
      );
  }

constructor(props) {
  super(props);

  this.state = {
        dataSource:new ListView.DataSource(
    {
      rowHasChanged:(row1,row2)=>row1!==row2,
    }),
    loaded:false,
  };
}

// getInitialState(){
//   return{
//     dataSource:new ListView.DataSource(
//     {
//       rowHasChanged:(row1,row2)=>row1!==row2,
//     }),
//     loaded:false,
//   }
// }

  componentDidMount() {
    this.fetchData();
  }

fetchData(){
 fetch(REQUEST_URL)
  .then((response)=>response.json())
  .then((responseData)=>{
    this.setState({
      dataSource:this.state.dataSource.cloneWithRows(responseData.movies),
      loaded:true,
    });
  })
  .catch((error) => {
        console.error(error);
      })
}

}

var styles=StyleSheet.create({
  container:{
    flex:1,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'#F5FCFF',
  },
  rightContainer:{
      flex:1,
      backgroundColor:'#CBFFCC',
      flexDirection:'row',
      justifyContent:'center',
      alignItems:'center',
  },
  thumbnail:{
    width:150,
    height:200,
  },
  title:{
    fontSize:20,
    marginBottom:8,
    textAlign:'center',
    color:"#CF1234"
  },
  year:{
    textAlign:'center',
  },
  listView:{
    paddingTop:20,
    backgroundColor:'#F5FCFF',
  },
});

AppRegistry.registerComponent('TestAndroid', () => TestAndroid);
